import { Handlers, PageProps } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";
import { ResumeCTX } from "~/routes/resume/_middleware.ts";
import { randomBadgeStyle } from "~/components/timeline.tsx";
import {
  getHobbys,
  getSharedProjects,
  getSkillLevel,
  ProjectInfo,
} from "~/routes/api/resume.ts";
import Project from "~/routes/resume/(_components)/project.tsx";
import Hobby, { HobbyItem } from "./(_islands)/hobby.tsx";
type Data = ReturnType<typeof getSkillLevel> & {
  projects: ProjectInfo[];
  hobbys: ReturnType<typeof getHobbys>;
};
export const handler: Handlers<Data> = {
  GET(_, ctx) {
    const hobbys = getHobbys();
    const projects = getSharedProjects();
    const skills = getSkillLevel();
    return ctx.render({ ...skills, hobbys, projects });
  },
};

export default ((ctx: PageProps<Data, ResumeCTX>) => {
  const {
    state: { userInfo },
    data: { baseSkill, frameworkLevel, hobbys, projects },
  } = ctx;

  return (
    <div class="xl:max-w-7xl mx-auto px-4">
      <Head>
        <title>关于我-{userInfo.name}</title>
      </Head>
      <div class="mt-8">
        <h4 class="text-center text-lg py-4 dark:text-white">基础技能</h4>
        <div class="text-wrap flex gap-4  flex-wrap justify-center max-w-5xl mx-auto">
          {baseSkill.map((skill) => (
            <span
              class={randomBadgeStyle.at(
                Math.floor(Math.random() * randomBadgeStyle.length),
              )}
            >
              {skill.text}
            </span>
          ))}
        </div>
      </div>
      <div class="mt-8">
        <h4 class="text-center text-lg py-4 dark:text-white">使用框架</h4>
        <div class="text-wrap flex gap-4   flex-wrap justify-center max-w-5xl mx-auto">
          {frameworkLevel.map((skill) => (
            <span
              class={randomBadgeStyle.at(
                Math.floor(Math.random() * randomBadgeStyle.length),
              )}
            >
              {skill.text}
            </span>
          ))}
        </div>
      </div>

      <div class="mt-8">
        <h4 class="text-center text-lg py-4">
          我想与你分享的项目
        </h4>
        {projects.map((i) => <Project {...i}></Project>)}
      </div>

      <div class="mt-8">
        <h4 class="text-center text-lg py-4 dark:text-white">爱好</h4>

        <Hobby
          items={hobbys.map<HobbyItem>((item) => {
            return {
              title: {
                children: item.text,
              },
              description: item.description,
              key: item.text,
            };
          })}
        >
        </Hobby>
      </div>
    </div>
  );
});
